<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en" th:replace="include/common/common :: commonHeader">
    <footer th:include="include/common/common :: layUiResource"></footer>
    <!--    <footer th:include="include/common/common :: bootstrapResource"></footer>-->
    <footer th:include="include/common/common :: blueCSSResource"></footer>

    <script>
        layui.config({
            base: '/staticResource/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index' , 'table'] , function () {
            var table = layui.table
                ,admin = layui.admin
                ,layer = layui.layer
                ,element = layui.element;

            let entityName = 'user'
                ,pageSize = [[${pageSize}]]
                ,tableId = entityName + "-table-operate"
                ,cols = [
                    [
                        {type:'checkbox', fixed: 'left'}
                        ,{field:'id', title: 'ID', sort: true, hide:true, fixed: 'left'}
                        ,{field:'userName', sort:true , title: '用户名'}
                        ,{field:'loginCode', sort:true , title: '登录名'}
                        ,{title:'操作' , align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
                    ]
                ];

            $(document).on('click' , '#' + entityName + 'SearchBtn' ,function () {
                $.fn.blueJs.tools.active['layTable'].call(this , table , this , pageSize , cols , tableId);
            });

            $(document).ready(function () {
                let searchBtn = '#' + entityName + 'SearchBtn';
                $.fn.blueJs.tools.active['layTable'].call(this , table , searchBtn , pageSize , cols , tableId);
            });


            //监听工具条
            //todo:以下测试，未完成
            //监听表格复选框选择
            table.on('checkbox(user-table-operate)', function(obj){
                console.log(obj)
            });

            table.on('tool(user-table-operate)', function(obj){
                let data = obj.data;
                if(obj.event === 'resetPwd'){
                    let jsonData = {
                        id:data.id
                    };
                    let type = 'ajaxFormSubmit';
                    let msg = $.fn.blueJs.tools.active[type].call(this , '/a/user/resetPassword' , jsonData);
                    //当你在iframe页面关闭自身时
                    type = 'showMsg';
                    // let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    $.fn.blueJs.tools.active[type].call(this , msg);
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    let i = "/a/" + entityName + "/form?id=" + data.id , t = "用户表单";
                    $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
                }
            });

            var active = {
                getCheckData: function(){ //获取选中数据
                    var checkStatus = table.checkStatus('test-table-operate')
                        ,data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                ,getCheckLength: function(){ //获取选中数目
                    var checkStatus = table.checkStatus('test-table-operate')
                        ,data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                }
                ,add: function(){
                    layui.router();
                    let i = "/a/" + entityName + "/form?isNewRecord=true" , t = "参数信息";
                    let l=parent===self?layui:top.layui;l.index.openTabsPage(i,t);
                },
                saveMsg: function(message){
                    layer.confirm(message, {
                        btn: ['关闭'] //按钮
                    }, function(){
                        layer.closeAll('page');
                    });
                }
            };

            $('.test-table-operate-btn .layui-btn').on('click', function(){
                let i = "/a/" + entityName + "/form?isNewRecord=true" , t = "用户信息";
                $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
            });
        });
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">用户信息</div>
                <div class="layui-card-body">
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <form class="layui-form-item" id="userSearchForm" th:object="${user}" method="post" action="/a/user/findPage">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">登录名：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="loginCode" id="searchLoginCode" placeholder="登录名" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label">用户名：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="userName" id="searchUserName" placeholder="登录名" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <!--                        todo:blue-form-id = entity + search + form-->
                                    <button type="button" class="layui-btn" id="userSearchBtn" onsubmit="return false" blue-form-id="userSearchForm">搜索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </form>
                        </div>

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" >
                    <div class="layui-btn-group test-table-operate-btn" id="tableBtn" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm" data-type="add" shiro:hasPermission="user:edit">新增</button>
                        <button class="layui-btn layui-btn-sm" data-type="getCheckData">获取选中行数据</button>
                        <button class="layui-btn layui-btn-sm" data-type="getCheckLength">获取选中数目</button>
                    </div>
                    <table class="layui-hide" id="user-table-operate" lay-filter="user-table-operate"></table>

                    <script type="text/html" id="test-table-operate-barDemo">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="resetPwd">密码重置</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>